<template>
  <div class="user_info">
    <el-container>
      <el-header>
        <header-item :item="tips"></header-item>
      </el-header>
      <el-main>
        <main-tools-item :toolsType="toolsType" :searchType="searchType" @search='search'></main-tools-item>
        <main-spare-item @onClick=''></main-spare-item>
        <main-data-list-item :columns="columns" :dataList="dataList" :pager="page" :loading="loading" @batchDelete='batchDelete'
          @currentChange='currentChange' @svip='svip'>
        </main-data-list-item>
      </el-main>
    </el-container>
    <!--新增弹框 -->
    <el-dialog title="修改VIP等级" :visible.sync="vipDialogVisible" width="30%" close-on-press-escape close-on-click-modal class="defaultDialog"
      :modal="false">
      <el-form ref="editParam" :rules="editRules" :model="editParam" label-width="30%">
        <el-form-item label="VIP等级" prop="vip">
          <el-input v-model.number="editParam.vip"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="editSumbit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {
    get,
    post,
    pat,
    del,
    common,
    getRefresh
  } from "../../../../api/api";
  import headerItem from "./../../Commons/headerItem.vue";
  import mainToolsItem from "./../../Commons/mainToolsItem.vue";
  import mainSpareItem from "./../../Commons/mainSpareItem.vue";
  import mainDataListItem from "./../../Commons/mainDataListItem.vue";
  export default {
    components: {
      headerItem,
      mainToolsItem,
      mainSpareItem,
      mainDataListItem
    },
    data() {
      var checkVip = (rule, value, callback) => {
        if (!value && value!=0) {
          return callback(new Error('VIP等级不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            callback();
          }
        }, 1000);
      };
      return {
        tips: "用户信息",
        toolsType: 2,
        searchType: 1,
        sels: [],
        vipDialogVisible: false,
        vipId: '',
        editParam: {
          vip: ''
        },
        editRules: {
          vip: [{
            validator: checkVip,
            trigger: 'blur'
          }],
        },
        page: {
          pageNo: 1,
          limit: 10,
          sizes: [10, 50, 100],
          total: 0
        },
        columns: [
          // {
          //   prop: 'id',
          //   label: '用户id',
          //   width: '150',
          //   align: 'center'
          // },
          {
            prop: 'nick',
            label: '用户昵称',
            width: '200',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'avatarUrl',
            label: '用户头像',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'phone',
            label: '手机号码',
            width: '200',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'userInfoVip',
            label: 'vip等级',
            width: '100',
            align: 'center',
            // formatter: this.formatter
          },
          // {
          //   prop: 'loginPwd',
          //   label: '登录密码',
          //   width: '140',
          //   align: 'center',
          //   // formatter: this.formatter
          // },
          // {
          //   prop: 'payPwd',
          //   label: '支付、提现密码',
          //   width: '140',
          //   align: 'center',
          //   // formatter: this.formatter
          // },
          // {
          //   prop: 'openId',
          //   label: '微信openId',
          //   width: '120',
          //   align: 'center',
          //   // formatter: this.formatter
          // },
          // {
          //   prop: 'unionId',
          //   label: '用户微信unionId',
          //   width: '140',
          //   align: 'center',
          //   // formatter: this.formatter
          // },
          {
            prop: 'balance',
            label: '余额',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'benefits',
            label: '总收益',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'distributionBenefits',
            label: '分销收益',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'bonusBenefits',
            label: '分红收益',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'coin',
            label: '平台币',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'point',
            label: '积分',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'inviteCode',
            label: '邀请码',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'consumeMoney',
            label: '用户总共消费的金额',
            width: '160',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'firstTeamMemberNum',
            label: '我的一级团队成员人数',
            width: '160',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'secondTeamMemberNum',
            label: '我的二级团队成员人数',
            width: '160',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'mailbox',
            label: '邮箱',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'userInfoGender',
            label: '性别',
            width: '120',
            align: 'center',
            // formatter: this.formatter
          },
          {
            prop: 'birthday',
            label: '生日',
            width: '160',
            align: 'center'
          },
          {
            prop: 'registerTime',
            label: '用户注册时间',
            width: '160',
            align: 'center',
            // formatter: this.formatter
          }
        ],
        dataList: [],
        loading: false,
        param: {
          phone: '',
          nick: '',
          size: '10',
          current: '1'
        },
      };
    },
    methods: {
      //--------查询----------
      search(val) {
        this.param = {}
        this.param.nick = "";
        this.param.phone = "";
        this.param.nick = val.nick;
        this.param.phone = val.phone;
        this.getUserInfoList();
      },
      //--------删除----------
      batchDelete(val) {
        console.log(val);
      },
      //-------分页----------
      currentChange(val) {
        this.param.current = "";
        this.param.current = val
        this.getUserInfoList();
      },
      //获取list列表
      getUserInfoList() {
        return new Promise((resolve, reject) => {
          this.loading = true;
          var param = {};
          for (let key in this.param) {
            if (this.param[key] != null && this.param[key].length != 0) {
              param[key] = this.param[key]
            }
          }
          post("/userInfo/userInfoListPage", param).then(resdata => {
            let self = function () {
              this.$router.push({
                path: '/home'
              });
            }.bind(this);
            let error = function () {
              alert(resdata.msg)
            }.bind(this);
            let success = function () {
              if (resdata.code == 1) {
                this.dataList = resdata.data.records;
                this.page.total = resdata.data.total;
                this.loading = false;
              }
            }.bind(this);
            common(self)(error)(success)(resdata);
            resolve();
          });
        });
      },
      svip(val, id,vip) {
        this.vipDialogVisible = val;
        this.vipId = id;
        this.editParam.vip = vip;
      },
      editSumbit() {
        this.$refs['editParam'].validate(valid => {
          if (valid) {
            this.$confirm('确定修改, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.editVip();
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        })
      },
      editVip() {
        return new Promise((resolve, reject) => {
          post("/userInfo/updateUserVip", {
            'id': this.vipId,
            'vip': this.editParam.vip
          }).then(resdata => {
            let self = function () {
              this.$router.push({
                path: '/home'
              });
            }.bind(this);
            let error = function () {
              alert(resdata.msg)
            }.bind(this);
            let success = function () {
              if (resdata.code == 1) {
                this.$message({
                  message: '修改成功！',
                  type: 'success',
                  duration: 2000,
                });
                this.getUserInfoList();
                this.vipDialogVisible = false;
              }
            }.bind(this);
            common(self)(error)(success)(resdata);
            resolve();
          });
        });
      }
    },
    async mounted() {
      // await this.$store.dispatch("userInfo", this);
      await this.getUserInfoList();
    },
    watch: {}
  };

</script>

<style lang="scss">
  .user_info {
    background-color: white;
    font-size: 1.8rem;
    width: 100%;
    height: 100%;
    .el-container {
      height: 100%;
      .el-header,
      .el-footer {
        background-color: #F9FAFE;
        color: #333;
        text-align: center;
        line-height: 50px;
        height: 50px !important;
        .header-child {
          height: 50px;
          width: 100%;
          text-align: left;
          padding-left: 20px;
          background-color: #cbe9eb;
          border-bottom: 1px solid black;
          box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
        }
      }
      .el-main {
        box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.5); // margin: 10px 20px;
        margin: 10px;
        background-color: #fff;
        color: #333;
        text-align: center;
        height: 100%;
      }
    }
       /* 弹框CSS*/
    .defaultDialog {
      z-index: 1200 !important;
      .el-dialog {
        box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        width: 30% !important;
        .el-dialog__header {
          text-align: left;
          .el-dialog__title {
            font-family: "Roboto", sans-serif;
            color: #7d7d7d;
            font-size: 15px;
          }
        }
        .el-dialog__body {
          .el-form {
            padding-left: 40px;
            .el-form-item {
              width: 100%;
              .el-form-item__content {
                text-align: left;
                width: 250px;
                .el-cascader {
                  width: 100%;
                }
                .el-select {
                  width: 100%;
                }
              }
              .el-form-item__label {
                padding: 0 50px 0 0;
                min-width: 80px;
                color: #333;
                font-weight: 400;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }

</style>
